<div class="bpm-work">
  <div class="bpm-work-left-ex">
    <ul nz-menu [nzMode]="'inline'" style="height: 100%;">
      <li nz-menu-item (click)="menu.setTab('main')" [nzSelected]="true"><i nz-icon type="form"></i>申请表单</li>
      <li nz-menu-item (click)="loadHistory()"><i nz-icon type="ordered-list"></i>办理过程</li>
      <li *ngIf="bs.info.type!=='3'" nz-menu-item (click)="loadImage()"><i nz-icon type="sort-ascending"></i>流程图</li>
    </ul>

    <!-- <ul nz-menu [nzMode]="'inline'" style="height: 100%;">
      <li nz-submenu [nzOpen]="true">
        <span title><i nz-icon type="solution"></i>环节</span>
        <ul>
          <li *ngFor="let c of bs.info.tasks" nz-menu-item [nzSelected]="c.current" (click)="menu.setTab('main')">
            {{c.name}}</li>
        </ul>
      </li>
      <li nz-submenu [nzOpen]="true">
        <span title><i nz-icon type="setting"></i>详情</span>
        <ul>
          <li nz-menu-item (click)="loadHistory()">办理过程</li>
          <li nz-menu-item (click)="loadImage()">流程图</li>
        </ul>
      </li>
    </ul> -->

  </div>
  <div class="bpm-work-right-ex">
    <div class="bpm-work-right-ex-content">
      <div class="bpm-tabs" *ngIf="menu.curItem=='main'">
        <h2 class="bpm-tabs-title">
          标准流程
        </h2>
        <div class="bpm-tabs-sub">
          <div class="bpm-tabs-sub-ioc"></div>
          <div class="bpm-tabs-sub-h2">表单信息</div>
        </div>
        <table>
          <tr>
            <td colspan="4" class="form-input">
              <h4 class="content-tilte" id="tab1">申请</h4>
            </td>
          </tr>
          <tr>
            <td class="form-text">
              <nz-form-label class="form-label">数据主键ID</nz-form-label>
            </td>
            <td class="form-input" colspan="3">
              {{bs.data.id}}
            </td>
          </tr>
          <tr>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">项目名称</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="accounts.invalid?'error':'success'"
                nzHasFeedback>
                <input nz-input [disabled]="!bs.info.first" [(ngModel)]="bs.data.accounts" name="accounts" required
                  #accounts="ngModel" />
              </nz-form-control>
            </td>
            <td class="form-text">
              <nz-form-label nzRequired class="form-label">天数</nz-form-label>
            </td>
            <td class="form-input">
              <nz-form-control class="form-control" [nzValidateStatus]="age.invalid?'error':'success'" nzHasFeedback>
                <input nz-input [disabled]="!bs.info.first" [(ngModel)]="bs.data.age" name="age" required
                  #age="ngModel" />
              </nz-form-control>
            </td>
          </tr>
        </table>
        <div class="bpm-tabs-sub">
          <div class="bpm-tabs-sub-ioc"></div>
          <div class="bpm-tabs-sub-h2">审批信息</div>
        </div>
        <!-- 复杂意见 -->
        <app-bpm-opinion [bpmServer]="bs"></app-bpm-opinion>
      </div>

      <div class="bpm-tabs" *ngIf="menu.curItem=='history'">
        <h2 class="bpm-tabs-title">
          办理过程
        </h2>
        <app-bpm-process [bpmServer]="bs"></app-bpm-process>
      </div>
      <div class="bpm-tabs" *ngIf="menu.curItem=='image'">
        <h2 class="bpm-tabs-title">
          流程图
        </h2>
        <app-bpm-image [bpmServer]="bs"></app-bpm-image>
      </div>
    </div>
  </div>

  <!-- 工具栏 -->
  <app-bpm-tool [bpmServer]="bs"></app-bpm-tool>

  <div class="content-loading" *ngIf="bs.isLoading">
    <nz-spin [nzSize]="'large'"></nz-spin>
  </div>
</div>
